<template>
    <div>
    <h2>{{ msg}}</h2>
    <h2>{{ msg.split("").reverse().join("") }}</h2>
    <h2>computed:{{ reMsg}}</h2>
    <h2>method:{{ reMsgF()}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsg}}</h2>
    <h2>{{ reMsgF()}}</h2>
    <h2>{{ reMsgF()}}</h2>
    <input type="text" v-model="msg"/>
    </div>
</template>
<script>
import{ computed, ref, watch} from "vue";
export default{
    srtup(){
        const msg = ref("Hello Vue");

        const reMsg = computed(() => {
            console.log("computed触发");
            return msg.value.split("").reverse().join("");
        });

        const reMsgF = () => {
            console.log("methods触发");
            return msg.value.split("").reverse().join("");
        };

        watch(msg, (newValue, oldValue) => {
            console.log('旧值是: ${oldValue}, 新值是: ${newValue}');
        });
        return{
            msg,
            reMsg,
            reMsgF,
        };
    },
};
</script>